<template>
	<wsPage title="商品分类列表">
		<Row>
			<Col span="6" style="border:1px solid #dddee1;padding-left: 4%;height: 400px;overflow-y: auto;">
				<Tree :data="options" @on-select-change="selectChange"></Tree>
			</Col>
	        <Col span="18">
				<wsSmPanel :page="table.page" @simple-query="query" @page-change="query">					
					<div slot="list_data">
						<Table border 
							:columns="table.columns" 
							:data="table.data" 
							@on-selection-change="tableSelected">
						</Table>
					</div>
				</wsSmPanel>
	        </Col>
		</Row>

	</wsPage>
</template>

<script>
	export default {
		data() {
			return {
				//上级分类参数
  				options: [],
  				treePath:[],
  				//条件查询
				queryForm: {
					name: '',
					id:'',
					parentId:null,
				},
				table: {
					columns: [{
						title: '分类名称',
                        key: 'name',
                        width: 300,
                        align: 'center',
                        fixed: 'left'
					},
					{
                        title: '上级分类',
                        key: 'parentName',
                        align: 'center'
                    },
					{
						title: '排序',
                        key: 'orderNum',
                        align: 'center',
					}],
					data: [],
					page: {
						total: 0, //总条数
						pageNum: 1, //当前页
						pageSize: 10 //每页显示条数
					},
					selection: [], //选中
				},
			}
		},
		computed: {
			/**
			 * 表格行是否为选中状态
			 */
			isTableSelected() {
				return this.table.selection.length > 0;
			},
		   /**
		     * 表格长度
		     */
		    tableLength() {
		    	return this.table.data.length;
		    }
		},
		mounted() {
			this.init();
		},
		methods: {
			init() {
				this.queryTree();
			},
			selectChange(row){
				this.treePath = [];
          		this.query(row[0].value);
          		var array = row[0].treePath.split(',');
				this.treePath=array;
          	},
          	query(value) {
          		if(value == '-1' || value == undefined){
          			this.queryForm.parentId = -1;
          		}else{
          			this.queryForm.parentId=parseInt(value);
          		}
				let pageSize = this.table.page.pageSize;
				let pageNum = this.table.page.pageNum;
				const _this = this;
				this.axios.post('/ws/ops/categorys?pageNum=' + pageNum + '&pageSize=' + pageSize, this.queryForm).then(response => {
					var res = response.data;
					var resMeta = res.meta;
					if (0 == resMeta.code) {
						_this.buildPageData(res.data);
					} else {
						_this.$Message.warning(resMeta.message);
					}
				});
			},
			/**
			 * 构建表格数据
			 */
			buildPageData(data_) {
				this.table.data = data_.list;
				this.table.page.total = data_.total;
				if(this.table.data.length>0){
					var array = this.table.data[0].treePath.split(',');
					this.treePath=array;
				}
				if(this.table.data.length<1){
					this.query(this.treePath[this.treePath.length-2]);
				}
			},
	        /**
			 * 查询树状分类
			 */
	        queryTree:function(){
	        	const _this = this;
				this.axios.get('/ws/ops/categoryTree').then(response => {
					_this.options = [];					    
					//赋值
					let options_ = response.data.data;
					_this.options.push({children:options_,childrenNum:null,label:'顶级分类',title:'商品分类',value:'-1',treePath:'-1',expand: true});
					_this.query();
				});
			},
			/**
			 * 表格选择变更事件
			 */
			tableSelected(selection_) {
				this.table.selection = selection_;
			},		
		}
	}
</script>

<style scoped>
	.ws-form-select {
		width: 162px;
	}
</style>